<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';
  import axios from "axios";

  export default {
    data() {
      return {
        randomBlog: [],
      }
    },
    methods: {
      toDetail(id) {
        this.$router.push({path: '/detail', query: {id: id}})
      },
      getRandomBlog() {
        axios({
          method: 'get',
          url: '/getrandom',
        }).then(res => {
          this.randomBlog = res.data.data
        })
      }
    },
    mounted() {
      this.getRandomBlog()
    }
  }
</script>

<template>
  <div class="random-blog">
    <div class="head">
      <div style="display: flex;position: absolute;left: 5%;top: 50%;transform: translate(-5%,-50%)">
        <div
          style="width: 13px;height: 13px;background: #F96052;border-radius: 6.5px;margin-right: 8px;box-shadow: 0 0 2px white"></div>
        <div
          style="width: 13px;height: 13px;background: #FEC434;border-radius: 6.5px;margin-right: 8px;box-shadow: 0 0 2px white"></div>
        <div
          style="width: 13px;height: 13px;background: #2BCD44;border-radius: 6.5px;margin-right: 8px;box-shadow: 0 0 2px white"></div>
      </div>
      <div class="s">
        随机文章
      </div>
    </div>
    <div class="ran-container">
      <div @click="toDetail(item.id)" class="ran-one" v-for="item in randomBlog">
        <el-image style="width: 100%;background: linear-gradient(to top,black,white)" :src="item.cover"></el-image>
        <div class="info" style="z-index: 999">
          <div class="time">{{ item.createTime }}</div>
          <div class="blog-title">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  @import "../assets/common.css";
</style>
<style src="../assets/detail.css" scoped>
</style>

